extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/forms/layout/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Forms'},
      { label: 'Layout'}
    ]
  )

block view
  +docs-components('https://coreui.io/docs/forms/layout/')
  .row
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Utilities
        .card-body
          p.text-body-secondary.small
            a(href='https://coreui.io/docs/utilities/spacing/') Margin utilities
            |  are the easiest way to add some structure to forms. They provide basic grouping of labels, controls, optional form text, and form validation messaging. We recommend sticking to 
            code margin-bottom
            |  utilities, and using a single direction throughout the form for consistency.
          p.text-body-secondary.small
            | Feel free to build your forms however you like, with 
            code
              = '<fieldset>'
            | s, 
            code
              = '<div>'
            | s, or nearly any other element.
          +example('https://coreui.io/docs/forms/layout/#utilities')
            .mb-3
              label.form-label(for='formGroupExampleInput') Example label
              input.form-control#formGroupExampleInput(type='text' placeholder='Example input placeholder')
            .mb-3
              label.form-label(for='formGroupExampleInput2') Another label
              input.form-control#formGroupExampleInput2(type='text' placeholder='Another input placeholder')
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Grid
        .card-body
          p.text-body-secondary.small
            | More complex forms can be built using our grid classes. Use these for form layouts that require multiple columns, varied widths, and additional alignment options.
            strong
              | Requires the 
              code $enable-grid-classes
              |  Sass variable to be enabled
            |  (on by default).
          +example('https://coreui.io/docs/forms/layout/#form-grid')
            .row
              .col
                input.form-control(type='text' placeholder='First name' aria-label='First name')
              .col
                input.form-control(type='text' placeholder='Last name' aria-label='Last name')
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Gutters
        .card-body
          p.text-body-secondary.small
            | By adding
            a(href='https://coreui.io/docs/layout/gutters/') gutter modifier classes
            | , you can have control over the gutter width in as well the inline as block direction.
            strong
              | Also requires the 
              code $enable-grid-classes
              |  Sass variable to be enabled
            |  (on by default).
          +example('https://coreui.io/docs/forms/layout/#gutters')
            .row.g-3
              .col
                input.form-control(type='text' placeholder='First name' aria-label='First name')
              .col
                input.form-control(type='text' placeholder='Last name' aria-label='Last name')
          p.text-body-secondary.small More complex layouts can also be created with the grid system.
          +example('https://coreui.io/docs/forms/layout/#gutters')
            form.row.g-3
              .col-md-6
                label.form-label(for='inputEmail4') Email
                input.form-control#inputEmail4(type='email')
              .col-md-6
                label.form-label(for='inputPassword4') Password
                input.form-control#inputPassword4(type='password')
              .col-12
                label.form-label(for='inputAddress') Address
                input.form-control#inputAddress(type='text' placeholder='1234 Main St')
              .col-12
                label.form-label(for='inputAddress2') Address 2
                input.form-control#inputAddress2(type='text' placeholder='Apartment, studio, or floor')
              .col-md-6
                label.form-label(for='inputCity') City
                input.form-control#inputCity(type='text')
              .col-md-4
                label.form-label(for='inputState') State
                select#inputState.form-select
                  option(selected) Choose...
                  option ...
              .col-md-2
                label.form-label(for='inputZip') Zip
                input.form-control#inputZip(type='text')
              .col-12
                .form-check
                  input.form-check-input#gridCheck(type='checkbox')
                  label.form-check-label(for='gridCheck').
                    Check me out
              .col-12
                button.btn.btn-primary(type='submit') Sign in
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Horizontal form
        .card-body
          p.text-body-secondary.small
            | Create horizontal forms with the grid by adding the 
            code .row
            |  class to form groups and using the 
            code .col-*-*
            |  classes to specify the width of your labels and controls. Be sure to add 
            code .col-form-label
            |  to your 
            code 
              = '<label>'
            | s as well so they’re vertically centered with their associated form controls.
          p.text-body-secondary.small
            | At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we’ve removed the 
            code padding-top
            |  on our stacked radio inputs label to better align the text baseline.
          +example('https://coreui.io/docs/forms/layout/#horizontal-form')
            form
              .row.mb-3
                label.col-sm-2.col-form-label(for='inputEmail3') Email
                .col-sm-10
                  input.form-control#inputEmail3(type='email')
              .row.mb-3
                label.col-sm-2.col-form-label(for='inputPassword3') Password
                .col-sm-10
                  input.form-control#inputPassword3(type='password')
              fieldset.row.mb-3
                legend.col-form-label.col-sm-2.pt-0 Radios
                .col-sm-10
                  .form-check
                    input.form-check-input#gridRadios1(type='radio' name='gridRadios' value='option1' checked)
                    label.form-check-label(for='gridRadios1').
                      First radio
                  .form-check
                    input.form-check-input#gridRadios2(type='radio' name='gridRadios' value='option2')
                    label.form-check-label(for='gridRadios2').
                      Second radio
                  .form-check.disabled
                    input.form-check-input#gridRadios3(type='radio' name='gridRadios' value='option3' disabled)
                    label.form-check-label(for='gridRadios3').
                      Third disabled radio
              .row.mb-3
                .col-sm-10.offset-sm-2
                  .form-check
                    input.form-check-input#gridCheck1(type='checkbox')
                    label.form-check-label(for='gridCheck1').
                      Example checkbox
              button.btn.btn-primary(type='submit') Sign in
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Horizontal form label sizing
        .card-body
          p.text-body-secondary.small
            | Be sure to use 
            code .col-form-label-sm
            |  or 
            code .col-form-label-lg
            |  to your 
            code
              = '<label>'
            | s or 
            code 
              = '<legend>'
            | s to correctly follow the size of 
            code .form-control-lg
            |  and 
            code .form-control-sm
            | .
          +example('https://coreui.io/docs/forms/layout/#horizontal-form-label-sizing')
            .row.mb-3
              label.col-sm-2.col-form-label.col-form-label-sm(for='colFormLabelSm') Email
              .col-sm-10
                input.form-control.form-control-sm#colFormLabelSm(type='email' placeholder='col-form-label-sm')
            .row.mb-3
              label.col-sm-2.col-form-label(for='colFormLabel') Email
              .col-sm-10
                input.form-control#colFormLabel(type='email' placeholder='col-form-label')
            .row
              label.col-sm-2.col-form-label.col-form-label-lg(for='colFormLabelLg') Email
              .col-sm-10
                input.form-control.form-control-lg#colFormLabelLg(type='email' placeholder='col-form-label-lg')
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Column sizing
        .card-body
          p.text-body-secondary.small
            | As shown in the previous examples, our grid system allows you to place any number of 
            code .col
            | s within a 
            code .row
            | . They’ll split the available width equally between them. You may also pick a subset of your columns to take up more or less space, while the remaining 
            code .col
            | s equally split the rest, with specific column classes like 
            code .col-sm-7
            | .
          +example('https://coreui.io/docs/forms/layout/#column-sizing')
            .row.g-3
              .col-sm-7
                input.form-control(type='text' placeholder='City' aria-label='City')
              .col-sm
                input.form-control(type='text' placeholder='State' aria-label='State')
              .col-sm
                input.form-control(type='text' placeholder='Zip' aria-label='Zip')
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Auto-sizing
        .card-body
          p.text-body-secondary.small
            | The example below uses a flexbox utility to vertically center the contents and changes 
            code .col
            |  to 
            code .col-auto
            |  so that your columns only take up as much space as needed. Put another way, the column sizes itself based on the contents.
          +example('https://coreui.io/docs/forms/layout/#auto-sizing')
            form.row.gy-2.gx-3.align-items-center
              .col-auto
                label.visually-hidden(for='autoSizingInput') Name
                input.form-control#autoSizingInput(type='text' placeholder='Jane Doe')
              .col-auto
                label.visually-hidden(for='autoSizingInputGroup') Username
                .input-group
                  .input-group-text @
                  input.form-control#autoSizingInputGroup(type='text' placeholder='Username')
              .col-auto
                label.visually-hidden(for='autoSizingSelect') Preference
                select.form-select#autoSizingSelect
                  option(selected) Choose...
                  option(value='1') One
                  option(value='2') Two
                  option(value='3') Three
              .col-auto
                .form-check
                  input.form-check-input#autoSizingCheck(type='checkbox')
                  label.form-check-label(for='autoSizingCheck').
                    Remember me
              .col-auto
                button.btn.btn-primary(type='submit') Submit
          p.text-body-secondary.small You can then remix that once again with size-specific column classes.
          +example('https://coreui.io/docs/forms/layout/#auto-sizing')
            form.row.gx-3.gy-2.align-items-center
              .col-sm-3
                label.visually-hidden(for='specificSizeInputName') Name
                input.form-control#specificSizeInputName(type='text' placeholder='Jane Doe')
              .col-sm-3
                label.visually-hidden(for='specificSizeInputGroupUsername') Username
                .input-group
                  .input-group-text @
                  input.form-control#specificSizeInputGroupUsername(type='text' placeholder='Username')
              .col-sm-3
                label.visually-hidden(for='specificSizeSelect') Preference
                select.form-select#specificSizeSelect
                  option(selected) Choose...
                  option(value='1') One
                  option(value='2') Two
                  option(value='3') Three
              .col-auto
                .form-check
                  input.form-check-input#autoSizingCheck2(type='checkbox')
                  label.form-check-label(for='autoSizingCheck2').
                    Remember me
              .col-auto
                button.btn.btn-primary(type='submit') Submit
    .col-12
      .card.mb-4
        .card-header
          strong Forms layout
          span.small.ms-1 Inline forms
        .card-body
          p.text-body-secondary.small
            | Use the 
            code .col-auto
            |  class to create horizontal layouts. By adding
            a(href='https://coreui.io/docs/layout/gutters/') gutter modifier classes
            | , we’ll have gutters in horizontal and vertical directions. The 
            code .align-items-center
            |  aligns the form elements to the middle, making the 
            code .form-checkbox
            |  align properly.
          +example('https://coreui.io/docs/forms/layout/#inline-forms')
            form.row.row-cols-lg-auto.g-3.align-items-center
              .col-12
                label.visually-hidden(for='inlineFormInputGroupUsername') Username
                .input-group
                  .input-group-text @
                  input.form-control#inlineFormInputGroupUsername(type='text' placeholder='Username')
              .col-12
                label.visually-hidden(for='inlineFormSelectPref') Preference
                select.form-select#inlineFormSelectPref
                  option(selected) Choose...
                  option(value='1') One
                  option(value='2') Two
                  option(value='3') Three
              .col-12
                .form-check
                  input.form-check-input#inlineFormCheck(type='checkbox')
                  label.form-check-label(for='inlineFormCheck').
                    Remember me
              .col-12
                button.btn.btn-primary(type='submit') Submit
